<template>
	<view class="balance-detail-container page-container">
		<!-- 余额卡片 -->
		<view class="balance-card">
			<view class="balance-header">
				<view class="balance-icon">
					<u-icon name="rmb-circle-fill" size="24" color="#ffffff"></u-icon>
				</view>
				<view class="balance-actions">
					<button class="action-btn recharge-btn" @click="recharge">
						<u-icon name="plus" size="16" color="#ffffff"></u-icon>
						<text class="btn-text">充值</text>
					</button>
					<button class="action-btn withdraw-btn" @click="withdraw">
						<text class="btn-text">- 提现</text>
					</button>
					<button class="action-btn withdraw-btn" @click="transfer">
						<text class="btn-text">- 转账</text>
					</button>
				</view>
			</view>

			<view class="balance-info">
				<view class="balance-main">
					<text class="balance-label">账户余额</text>
					<text class="balance-amount">¥ {{ balanceInfo.balance }}</text>
				</view>

				<view class="balance-details">
					<view class="detail-item">
						<text class="detail-label">可用余额</text>
						<text class="detail-value">¥ {{ balanceInfo.balance }}</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">待结算</text>
						<text class="detail-value">¥ {{ balanceInfo.transit_commission }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 佣金卡片 -->
		<view class="gift-card">
			<view class="gift-header">
				<view class="gift-icon">
					<text class="gift-text">佣</text>
				</view>
				<text class="gift-label">累计佣金</text>
			</view>
			<text class="gift-amount">¥ {{ balanceInfo.settle_commission }}</text>
		</view>

		<!-- 充值卡片 -->
		<view class="points-card">
			<view class="points-header">
				<view class="points-icon">
					<text class="points-text">充</text>
				</view>
				<text class="points-label">累计充值</text>
			</view>
			<text class="gift-amount">¥ {{ balanceInfo.recharge_amount }}</text>
		</view>
		<!-- 提现卡片 -->
		<view class="points-card">
			<view class="points-header">
				<view class="points-icon">
					<text class="points-text">提</text>
				</view>
				<text class="points-label">累计提现</text>
			</view>
			<text class="gift-amount">¥ {{ balanceInfo.withdraw_amount }}</text>
		</view>

		<!-- 交易记录 -->
		<view class="transaction-section">
			<view class="section-header">
				<text class="section-title">交易记录</text>
			</view>

			<!-- 筛选器 -->
			<view class="filter-section">
				<view class="date-filter">
					<input class="date-input" placeholder="开始日期" v-model="filterData.startDate"
						@click="showStartDatePicker = true" readonly />
					<text class="date-separator">至</text>
					<input class="date-input" placeholder="结束日期" v-model="filterData.endDate"
						@click="showEndDatePicker = true" readonly />
				</view>

				<view class="type-filter">
					<view class="filter-tab" v-for="(tab, index) in filterTabs" :key="index"
						:class="{ active: filterData.event_type === tab.value }" @click="selectFilterTab(tab.value)">
						<text class="tab-text">{{ tab.label }}</text>
					</view>
				</view>
			</view>

			<!-- 交易列表 -->
			<view class="transaction-list">
				<view class="transaction-item" v-for="(item, index) in transactionList" :key="index">
					<view class="transaction-icon">
						<u-icon :name="item.icon" size="20" :color="item.iconColor"></u-icon>
					</view>
					<view class="transaction-info">
						<text class="transaction-title">{{ item.event_type_desc }}</text>
						<text class="transaction-desc">{{ item.event_data }}</text>
						<text class="transaction-time">{{ item.event_time }}</text>
					</view>
					<view class="transaction-amount">
						<text class="amount-text" :class="item.type">{{ [1,3,6].includes(item.event_type) ? '+' : '-' }}
							¥ {{ item.change_amount }}</text>
						<text class="status-text" :class="item.status">{{ item.statusText }}</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="transactionList.length === 0">
				<image src="@/static/images/empty-transaction.png" mode="aspectFit" class="empty-image">
				</image>
				<text class="empty-text">暂无交易记录</text>
			</view>
		</view>

		<!-- 日期选择器 -->
		<u-datetime-picker :show="showStartDatePicker" v-model="startDateValue" mode="date" @confirm="confirmStartDate"
			@cancel="showStartDatePicker = false"></u-datetime-picker>

		<u-datetime-picker :show="showEndDatePicker" v-model="endDateValue" mode="date" @confirm="confirmEndDate"
			@cancel="showEndDatePicker = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				// 余额信息
				balanceInfo: {
					balance: '0.00',
					recharge_amount: '0.00',
					transfer_amount: '0.00',
					withdraw_amount: '0.00',
					income_amount: '0.00',
					consume_amount: '0.00',
					settle_commission: '0.00',
					transit_commission: '0.00'
				},
				// 筛选数据
				filterData: {
					startDate: '',
					endDate: '',
					event_type: 0
				},
				// 日期选择器
				showStartDatePicker: false,
				showEndDatePicker: false,
				startDateValue: Number(new Date()),
				endDateValue: Number(new Date()),
				// 筛选标签 事件类型：1-收入 2-支出 3-充值 4-提现 5-转账(转出) 6-转账(转入)
				filterTabs: [{
						label: '全部',
						value: 0
					},
					{
						label: '收入',
						value: 1
					},
					{
						label: '支出',
						value: 2
					},
					{
						label: '充值',
						value: 3
					},
					{
						label: '提现',
						value: 4
					},
					{
						label: '转账',
						value: 5
					}
				],
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				// 交易记录
				transactionList: []
			}
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo'])
		},
		onLoad() {

		},
		onShow() {
			this.loadAccountInfo();
			this.onSearch()
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.transactionList = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			// 查询账户信息
			loadAccountInfo() {
				this.$api.user.GetAccountInfo().then(res => {
					if (res.data && res.data.balance) {
						this.balanceInfo = res.data
					}
				})
			},

			// 重新重新事件
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.transactionList = []
				this.loadDataList()
			},
			loadDataList() {
				// 加载数据列表
				if (this.hasSearched) {
					return false
				}

				this.hasSearched = true
				this.$api.user.GetBalanceList({
					page: this.page,
					limit: this.limit,
					event_type: this.filterData.event_type,
					startDate: this.filterData.startDate,
					endDate: this.filterData.endDate,
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					// 设置样式和图标 事件类型：1-收入 2-支出 3-充值 4-提现 5-转账(转出) 6-转账(转入)
					res.data.forEach(item => {
						item.type = [1, 3, 6].includes(item.event_type) ? 'income' : 'expense'
						item.status = item.sync_status === 1 ? 'completed' : 'expense'
						item.statusText = item.sync_status === 1 ? '已完成' : '处理中'
						item.iconColor = [1, 3, 6].includes(item.event_type) ? '#52a58a' : '#ff6b6b'
						item.icon = [1, 3, 6].includes(item.event_type) ? 'plus-circle' : 'minus-circle'
						if (item.event_type === 1) {
							item.category = 'income'
						} else if (item.event_type === 2) {
							item.category = 'expense'
							item.icon = 'shopping-cart'
						} else if (item.event_type === 3) {
							item.category = 'recharge'
						} else if (item.event_type === 4) {
							item.category = 'withdraw'
						} else if ([5, 6].includes(item.event_type)) {
							item.category = 'transfer'
						}
					})
					this.transactionList = this.transactionList.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			// 充值
			recharge() {
				uni.navigateTo({
					url: '/pages/payment/recharge'
				})
			},

			// 提现
			withdraw() {
				uni.navigateTo({
					url: '/pages/payment/withdraw'
				})
			},

			// 转账
			transfer() {
				uni.navigateTo({
					url: '/pages/payment/transfer'
				})
			},

			// 选择筛选标签
			selectFilterTab(type) {
				this.filterData.event_type = type
				this.onSearch()
			},

			// 确认开始日期
			confirmStartDate(e) {
				this.filterData.startDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.showStartDatePicker = false
				this.onSearch()
			},

			// 确认结束日期
			confirmEndDate(e) {
				this.filterData.endDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.showEndDatePicker = false
				this.onSearch()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance-detail-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.balance-card {
		background: linear-gradient(135deg, #52a58a 0%, #459a7e 100%);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		color: white;
	}

	.balance-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.balance-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.balance-actions {
		display: flex;
		gap: 16rpx;
	}

	.action-btn {
		padding: 0rpx 24rpx;
		border-radius: 20rpx;
		border: none;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.recharge-btn {
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
	}

	.withdraw-btn {
		background-color: transparent;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		color: white;
	}

	.btn-text {
		color: inherit;
	}

	.balance-main {
		margin-bottom: 30rpx;
	}

	.balance-label {
		font-size: 26rpx;
		opacity: 0.9;
		display: block;
		margin-bottom: 12rpx;
	}

	.balance-amount {
		font-size: 48rpx;
		font-weight: 600;
		display: block;
	}

	.balance-details {
		display: flex;
		justify-content: space-between;
	}

	.detail-item {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.detail-label {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.detail-value {
		font-size: 28rpx;
		font-weight: 500;
	}

	.gift-card,
	.points-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.gift-header,
	.points-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.gift-icon,
	.points-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 600;
		color: white;
	}

	.gift-icon {
		background-color: #ff6b35;
	}

	.points-icon {
		background-color: #ffa726;
	}

	.gift-label,
	.points-label {
		font-size: 28rpx;
		color: #333;
	}

	.gift-amount,
	.points-amount {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.transaction-section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-header {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.filter-section {
		margin-bottom: 30rpx;
	}

	.date-filter {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.date-input {
		flex: 1;
		padding: 16rpx 20rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 8rpx;
		font-size: 26rpx;
		background-color: #f8f9fa;
	}

	.date-separator {
		font-size: 26rpx;
		color: #666;
	}

	.type-filter {
		display: flex;
		gap: 1rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.filter-tab {
		flex: 1;
		padding: 16rpx 12rpx;
		text-align: center;
		background-color: #ffffff;
	}

	.filter-tab.active {
		background-color: #52a58a;
	}

	.tab-text {
		font-size: 24rpx;
		color: #666;
	}

	.filter-tab.active .tab-text {
		color: white;
	}

	.transaction-list {
		display: flex;
		flex-direction: column;
		gap: 1rpx;
		background-color: #f0f0f0;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.transaction-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #ffffff;
		gap: 20rpx;
	}

	.transaction-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: #f8f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.transaction-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.transaction-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.transaction-desc {
		font-size: 24rpx;
		color: #666;
	}

	.transaction-time {
		font-size: 22rpx;
		color: #999;
	}

	.transaction-amount {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 8rpx;
	}

	.amount-text {
		font-size: 28rpx;
		font-weight: 500;
	}

	.amount-text.income {
		color: #52a58a;
	}

	.amount-text.expense {
		color: #ff6b6b;
	}

	.status-text {
		font-size: 22rpx;
	}

	.status-text.completed {
		color: #52a58a;
	}

	.status-text.processing {
		color: #ffa726;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;
		text-align: center;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #666;
	}
</style>